<!--作者：薛嘉颖
描述：学生个人信息
修改人：薛嘉颖  -->
<template>
<div id="studentPersonalInformation">
 <div id="left">
    <div id="leftTop">
        <!-- 搜索框 -->
      <div class="demo-input-size">
        <el-input
          v-model="input1"
          class="w-50 m-2"
          placeholder="Search"
          :suffix-icon="Search"
        />
      </div>
      <!-- 文本 -->
      <span id="Ttext">基本资料</span>
      <!-- 修改按钮 -->
       <el-button type="primary" @click="jumpTeamScoreInfo">修改密码</el-button>
       <el-button type="primary" @click="jumpTeamScoreInfo">修改</el-button>
       <el-button type="primary">修改</el-button>
       <!-- 线 -->
      <div id="line">
        <hr class="langHr">
      <hr class="shortHr">
      </div>
      <div id="personData">
        <div id="picture">
          <img id="headImg" src="@/assets/imgs/headImg.png" >
          <el-button type="primary">上传头像</el-button>
        </div>
        <div id="detail">
          <ul id="detailUl">
            <li id="detailLi" v-for="(item,index) in detailData" :key="index">{{item.title}}{{item.val}}</li>
          </ul>
        </div>
      </div>
    </div>

    <div id="leftBottom">
        <!-- 文本 -->
      <span id="Ttext">项目小组</span>
      <!-- 修改按钮 -->
       <el-button type="primary">更多详情</el-button>
       <!-- 线 -->
      <div id="line">
        <hr class="langHr">
      <hr class="shortHr">
      </div>
      <!-- 表格 -->
        <el-table :data="tableData" height="150" style="width: 90%">
          <el-table-column prop="projectName" label="项目名称" width="180" />
          <el-table-column prop="projectTeam" label="项目小组" width="180" />
          <el-table-column prop="teamMembers" label="小组成员" width="120" />
          <el-table-column prop="projectRole" label="项目角色" width="120" />
          <el-table-column prop="projectDetail" label="详情">
              <el-button type="primary">查看</el-button>
          </el-table-column>
        </el-table>
    </div>
 </div>


 <div id="right">
      <!-- 文本 -->
      <span id="Ttext">项目得分</span>
      <span id="Ttext">项目小组</span>
      <!-- 修改按钮 -->
       <el-button type="primary">更多详情</el-button>
       <!-- 线 -->
      <div id="line">
        <hr class="langHr">
      <hr class="shortHr">
      </div>
      <!-- 动态图 -->
      <div id="projectScoreEchart"></div>
 </div>
 <!-- 弹窗 -->
 <transition>
   <div class=" el-overlay is-message-box" v-if="pageShow">
            <div class="addpage">
                <studentModifyInformationPopup @closeclick="closeclick"></studentModifyInformationPopup>
            </div>
        </div>
 </transition>
       
      <div id="echart">
        <span id="echartText">近期项目得分情况预览</span>
        <!-- <img src="@/assets/imgs/echartImg.png" id="echartImg"  > -->
      </div>
 </div>

</template>

<script lang='js'>

import { ref } from 'vue'
import * as echarts from 'echarts';
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import {onMounted} from 'vue';
import studentModifyInformationPopup from './studentModifyInformationPopup.vue'
export default {
  name: "studentPersonalInformation",
  components:{studentModifyInformationPopup},
  setup() {
    let pageShow = ref(false)
        function jumpTeamScoreInfo() {
            //  router.push(  {name:'teamscoreinfo'} )
            pageShow.value=true
        }
        function closeclick(isclose){
        if(isclose==false){
            pageShow.value=false
        }
    }
        const detailData = [
      {
        title:'姓名 : ',
        val: "薛嘉颖"
      },
       {
        title:'学号 : ',
        val: "199000951"
      },
       {
        title:'性别 : ',
        val: "女"
      },
       {
        title:'院系 : ',
        val: "软件学院"
      },
       {
        title:'年级 : ',
        val: "19"
      },
       {
        title:'专业 : ',
        val: "软件学院"
      },
       {
        title:'手机号 : ',
        val: "15736190069"
      },
       {
        title:'辅导员 : ',
        val: "易华琴"
      },
       {
        title:'邮箱 : ',
        val: "jiayingxue0@gmail.com"
      },
        {
        title:'',
        val: ""
      },
       {
        title:'身份证号码 : ',
        val: "350305200105130042"
      },
    ];
    const tableData = [
      {
        projectName: '实训考勤打卡系统',
        projectTeam: 'JAVA软件开发实训A组',
        teamMembers: '张三',
        projectRole:'前端',
        projectDetail:'详情'
      },
        {
        projectName: '实训考勤打卡系统',
        projectTeam: 'JAVA软件开发实训A组',
        teamMembers: '张三',
        projectRole:'前端',
        projectDetail:'详情'
      },
       {
        projectName: '实训考勤打卡系统',
        projectTeam: 'JAVA软件开发实训A组',
        teamMembers: '张三',
        projectRole:'前端',
        projectDetail:'详情'
      },
       {
        projectName: '实训考勤打卡系统',
        projectTeam: 'JAVA软件开发实训A组',
        teamMembers: '张三',
        projectRole:'前端',
        projectDetail:'详情'
      },
     
     
];
  onMounted(() => {//需要获取到element,所以是onMounted的Hook
        let myChart = echarts.init(document.getElementById("projectScoreEchart"));
        // 指定图表的配置项和数据
      var option = {
          tooltip: {
            // 悬停显示详细信息
                    trigger: 'item'
                },
          title: {
          text: '近期项目得分情况预览',
          x:'center'
        },
          legend: {
            Try :'horizontal',
            orient: 'vertical',
            right: 10,
            top: 'center'
          },
          dataset: {
            source: [
              ['product', '项目A', '项目B' ],
              ['一组', 43.3, 85.8 ],
              ['二组', 83.1, 73.4 ],
              ['三组', 86.4, 65.2],
              ['四组', 72.4, 53.9]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: {},
          series: [{ type: 'bar' }, { type: 'bar' }]
        };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
        });
  return {
      detailData,
      pageShow,
      jumpTeamScoreInfo,
      closeclick,
      tableData
    };
    }
    

}
</script>






<style lang='less' scoped>
#left{
  #leftTop{
    /deep/ .demo-input-size{
   .el-input__inner{
      width: 200px;
      background-color:  rgb(194, 218, 226); 
      border: 1px solid rgb(112, 110, 110);
      border-radius: 80px;
      margin-top: 30px;
       margin-bottom: 10px;
      margin-left: 60px;
      }
    }
    #Ttext{
      position: absolute;
      margin-left: 80px;
      top: 89px;
    }
    .el-button{
       margin-left: 650px;
       background-color: rgb(57, 127, 150);
       position: relative;
       top: 15px;
    }
    #line{
      margin-top: -70px;
      margin-bottom: 70px;
    .langHr{
              margin:10px 60px;
              width:50%;
              border: 1px solid rgb(194,218,226);
              margin-top: 90px;
              background-color:rgb(194,218,226) ;
          }
    .shortHr{
              margin-left:60px;
              width:200px;
              border:4px solid rgb(62,148,173);
              margin-top:-15px;
              margin-bottom: 40px;
              border-radius: 20px;
              background-color:rgb(62,148,173) ;
          }
    }
    #personData{
      // float: left;
      position: absolute;
      top: 150px;
      left: 55px;
      #picture{
        #headImg{
        width: 170px;
        height: 170px;
        border-radius: 50px;
      }
        .el-button{
        left: -780px;
        top: 40px;
      }
      }
      #detail{
        width: 50%;
        #detailUl{
          flex-wrap:wrap;
          list-style: none;
          margin-left: 300px;
          margin-top: -200px;
          width: 80%;
          display: flex;
          #detailLi{
            width: 50%;
            padding-bottom: 10px;
            color: rgb(138, 136, 136);
          }
        }
      }
   
    }

}
  #leftBottom{
    position: absolute;
    top:350px;
        #Ttext{
          position: absolute;
          margin-left: 80px;
          top: 70px;
        }
        .el-button{
          margin-left: 650px;
          background-color: rgb(57, 127, 150);
          position: relative;
          top: 60px;
        }
        #line{
          margin-top: -20px;
          margin-bottom: 70px;
        .langHr{
                  margin:10px 60px;
                  width: 90%;
                  border: 1px solid rgb(194,218,226);
                  margin-top: 90px;
                  background-color:rgb(194,218,226) ;
              }
        .shortHr{
                  margin-left:60px;
                  width:200px;
                  border:4px solid rgb(62,148,173);
                  margin-top:-15px;
                  margin-bottom: 40px;
                  border-radius: 20px;
                  background-color:rgb(62,148,173) ;
              }
        }
        .el-table{
          margin-left: 50px;
          top: -50px;
          .el-button{
               width: 50px;
              top: 4px;
              margin-left: 60px;
              position: absolute;
              left: -60px;
          }
        }
        
  }
}

#right{
     float: right;
    margin-right: 20px;
    margin-top: -120px;
    width: 500px;
    height: 550px;
    border-radius: 20px;
    background-color:rgba(171, 211, 228,0.1);
     #Ttext{
          position: absolute;
          margin-left: 20px;
          top: 130px;
        }
      .el-button{
             margin-left: 400px;
            background-color: #397f96;
            position: relative;
            top: 45px;
        }
      #line{
        margin-top: -40px;
        margin-left: -50px;
        .langHr{
                  margin:10px 60px;
                  width: 87%;
                  border: 1px solid rgb(194,218,226);
                  margin-top: 90px;
                  background-color:rgb(194,218,226) ;
              }
        .shortHr{
                  margin-left:60px;
                  width:100px;
                  border:4px solid rgb(62,148,173);
                  margin-top:-15px;
                  margin-bottom: 40px;
                  border-radius: 20px;
                  background-color:rgb(62,148,173) ;
              }
        }
        #projectScoreEchart{
          width:510px;
            height: 400px;
         
        
        }
}
.addpage{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
}
        #echart{
          #echartText{
            margin-left: 160px;
          }
          #echartImg{
            width:500px;
            height: 400px;
          }
        }

 



</style>
